<template>
    <div>
        center
        <van-button type="success">成功按钮</van-button>
    </div>
</template>

<!-- 方式一：export default和setup语法糖 -->
<!-- <script>
export default {
    //同样支持async、await语法
    async beforeRouteEnter(to, from, next) {
        let isAuthenticated = await localStorage.getItem("token");

        if (isAuthenticated) {
            next()
        } else {
            next({ name: "Login" })
        }
    },

    // beforeRouteLeave() {
    //     const select = window.confirm("你确定要离开吗？")
    //     if (!select) return false
    // }
}
</script>

<script setup>
//没有onBeforeRouteEnter这个钩子函数，所以要么用全局路由守卫，要么保留上面的beforeRouteEnter
import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave(() => {
    const select = window.confirm("你确定要离开吗？")
    if (!select) return false
})
</script> -->

<!-- 方式二：统一用export default, 内部用setup函数 -->
<script>
import { onBeforeRouteLeave } from 'vue-router';
// import { Button } from 'vant';
export default {
    //vant局部注册
    // components: {
    //     [Button.name]: Button,
    // },
    setup() {
        //setup函数里面使用onBeforeRouteLeave
        onBeforeRouteLeave(() => {
            const select = window.confirm("你确定要离开此页面吗？")
            if (!select) return false
        })
    },

    async beforeRouteEnter(to, from, next) {
        let isAuthenticated = await localStorage.getItem("token");

        if (isAuthenticated) {
            next()
        } else {
            next({ name: "Login" })
        }
    },

}

</script>

<script setup>
//setup语法糖中用法：van-button统一写成小驼峰方式
import { Button as vanButton } from 'vant';


</script>

